<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-03-20 22:04:11
 * @LastEditTime: 2024-03-20 22:43:42
 * @FilePath: \env-manager-pc\src\views\dashboard\qiye\yongdianliangDay.vue
-->
<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-22 22:15:35
 * @LastEditTime: 2024-03-20 21:39:52
 * @FilePath: \env-manager-pc\src\views\dashboard\huanjing\yongdianliang.vue
-->
<script setup lang="ts">
import * as Echarts from 'echarts'
import dayjs from 'dayjs'
import useUserStore from '@/store/modules/user'
import entApi from '@/api/modules/ent'

const userStore = useUserStore()
const loading = ref(false)
const series = ref<any>([])
const timeLine = ref([])

async function getData(isToday: boolean) {
  const now = dayjs().startOf('day')
  const startTime = isToday
    ? now.format('YYYY-MM-DD HH:mm:ss')
    : now.subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss')
  const endTime = isToday
    ? now.endOf('day').format('YYYY-MM-DD HH:mm:ss')
    : now.format('YYYY-MM-DD HH:mm:ss')
  const res = await entApi.GetEnterprisePowerDatas({
    enterpriseObjIDs: [userStore.userInfo.AffiliatedObjId],
    startTime,
    endTime,
  })
  const { Columns, Datas } = res
  timeLine.value = Columns
  series.value.push({
    name: `${isToday ? '今日' : '昨日'}`,
    type: 'line',
    data: Datas[userStore.userInfo.AffiliatedObjId],
    itemStyle: {
      color: `${isToday ? '#e45656' : '#9a9998'}`,
    },
  })
}

const renderTimeLine = computed(() => {
  return timeLine.value.map((item) => {
    return dayjs(item).format('HH:mm')
  })
})

const option = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      right: 20,
      orient: 'horizontal',
    },
    grid: {
      left: '3%',
      right: 30,
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {},
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: renderTimeLine.value,
    },
    yAxis: {
      type: 'value',
      name: '单位（kW）',
      scale: true,
    },
    series: series.value,
  }
})

const chartRef = ref<any>()
let chart: any = null
onMounted(() => {
  chart = Echarts.init(chartRef.value)
  window.addEventListener('resize', () => {
    chart.resize()
  })
})

async function getAllData() {
  loading.value = true
  await getData(true)
  await getData(false)
  loading.value = false
  chart.setOption(option.value)
}
getAllData()
</script>

<template>
  <PageMain title="企业总用电">
    <div ref="chartRef" class="h-[30vh] min-h-[300px] w-full overflow-hidden" />
  </PageMain>
</template>
